<template>
  <view class="container">
    <view class="info-card">
      <image class="avatar" v-if="token" :src="userInfo.avatarUrl || images +'/avatar.png'" mode="widthFix" />
      <image class="avatar" v-if="!token" :src="images +'/avatar.png'" mode="widthFix" />
      <view class="loginBt" v-if="!token" @click="loginRed">
        点击登录
      </view>
      <div class="basic" v-if="token">
        <div class="username">{{userMsg.name || '用户名'}}
          <text class="userType"><text
              v-if="userMsg.membership">{{userMsg.membership+'-'}}</text>{{userMsg.roleName || '角色'}}</text>
        </div>
        <div class="userAddr">{{room.roomInfo+'-'+room.roomName}}</div>
      </div>
      <view class="userChange" v-if="token" @click="houseMan">
        房屋管理<view class="rightArrow"></view>
      </view>
    </view>
    <block v-if="userMsg.roleId==16">
      <view class="myAppr">由我审批</view>
      <view class="myNavsMenu">
        <view class="navsAllItem" v-for="(item,index) in ownerList" :key="index" @click="myApprove(index)">
          <image class="navsAllIcon" :src="localImages +item.url"></image>
          <view class="navsAllText">
            {{item.name || '123'}}
          </view>
          <view class="navsAllCount" v-if="item.allCount>0">{{item.allCount || 1}}
          </view>
        </view>
      </view>
    </block>

    <block v-if="userMsg.roleId==17">
      <view class="myAppr">我的申请</view>
      <view class="myNavsMenu">
        <view class="navsAllItem" v-for="(item,index) in headList" :key="index" @click="myApprove(index)">
          <image class="navsAllIcon" :src="localImages +item.url"></image>
          <view class="navsAllText">
            {{item.name || '123'}}
          </view>
          <view class="navsAllCount" v-if="item.allCount>0">{{item.allCount || 1}}
          </view>
        </view>
      </view>
    </block>

    <view class="navsItem" v-if="userMsg.roleId==16 || userMsg.roleId==17" @click="houseMem">
      <image class="navsItemIcon" :src="localImages +'/myMem.png'" mode="widthFix"></image>
      <view class="navsItemTil">成员</view>
      <view class="rightArrow"></view>
    </view>
    <view class="navsItem" @click="systemSet">
      <image class="navsItemIcon" :src="localImages +'/mySet.png'" mode="widthFix" />
      <view class="navsItemTil">设置</view>
      <view class="rightArrowTip" v-if="formData.faceSwitch==0">未上传人脸</view>
      <view class="rightArrow"></view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../static/config.js'
  import util from '../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        headList: [{
            'index': 1,
            name: '待审批',
            url: '/myPre.png',
            allCount: 0
          },
          {
            'index': 3,
            name: '已同意',
            url: '/myCom.png',
            allCount: 0
          },
          {
            'index': 6,
            name: '已拒绝',
            url: '/myRef.png',
            allCount: 0
          },
        ],
        ownerList: [{
            'index': 1,
            name: '待审批',
            url: '/myPre.png',
            allCount: 0
          },
          {
            'index': 3,
            name: '已同意',
            url: '/myCom.png',
            allCount: 0
          },
          {
            'index': 6,
            name: '已拒绝',
            url: '/myRef.png',
            allCount: 0
          },
        ],
        headIndex: 0, //头部标题索引
        token: '',
        myInfo: '',
        room: '',
        userMsg: '',
        userInfo: '',
        formData: {
          visitorNotifySwitch: 0,
          faceSwitch: -1,
        },
      }
    },
    computed: {
      // ...mapState({
      //   myInfo: state => state.user.myInfo
      // })
    },
    onLoad() {

    },
    onShow() {
      wx.showTabBar()

      var token = wx.getStorageSync('token');
      this.token = token;
      if (token) {
        var userInfo = wx.getStorageSync('userInfo');
        this.userInfo = userInfo;
        var room = wx.getStorageSync('room');
        this.room = room;
        var userMsg = wx.getStorageSync('userMsg');
        this.userMsg = userMsg;
        this.approvalList();
        util.socketTest();
        this.systemSetting();
      } else {
        // wx.redirectTo({url:'/pages/bindLogin/main'})
      }
    },
    methods: {
      myApprove(index) {
        console.warn("===goDetail", index)
        wx.navigateTo({
          url: '/pages/subMe/myApprove/main?index=' + index
        })
      },
      systemSet() {
        wx.navigateTo({
          url: '/pages/subMe/systemSet/main'
        })
      },
      houseMan() {
        wx.navigateTo({
          url: '/pages/subMe/houseMan/main'
        })
      },
      houseMem() {
        wx.navigateTo({
          url: '/pages/subMe/houseMem/main'
        })
      },
      goDetail(index) {
        console.warn("===goDetail", index)
        wx.navigateTo({
          url: '/pages/subMe/approve/main?index=' + index
        })
      },
      loginRed() {
        util.getUserProfile();
      },
      approvalList() {
        var room = this.room
        var params = {
          roomId: room.roomId,
          ownerId: room.ownerId,
          projectId: room.projectId,
        }
        util.wxRequestPro('/UserServer/owner/info/approvalList', params)
          .then((res) => {
            console.warn('approvalList', res)
            var param = res.param;
            var userMsg = this.userMsg;
            //租客不展示审批列表数字提示
            // if(userMsg.roleId==17) {
            //   var awaiteFilter=param.awaiteFilter.filter((item)=>{
            //     return item.applyId==room.ownerId;
            //   })
            //   this.headList[0].allCount=awaiteFilter.length;
            //   var approveFilter=param.approveFilter.filter((item)=>{
            //     return item.applyId==room.ownerId;
            //   })
            //   this.headList[1].allCount=approveFilter.length;
            //   var refuseFilter=param.refuseFilter.filter((item)=>{
            //     return item.applyId==room.ownerId;
            //   })
            //   this.headList[2].allCount=refuseFilter.length;
            // }

            //业主展示由我审批列表
            if (userMsg.roleId == 16) {
              var awaiteFilter2 = param.awaiteFilter.filter((item) => {
                return item.applyId != room.ownerId;
              })
              this.ownerList[0].allCount = awaiteFilter2.length;
              // var approveFilter=param.approveFilter.filter((item)=>{
              //   return item.applyId!=room.ownerId;
              // })
              // this.ownerList[1].allCount=approveFilter.length;
              // var refuseFilter=param.refuseFilter.filter((item)=>{
              //   return item.applyId!=room.ownerId;
              // })
              // this.ownerList[2].allCount=refuseFilter.length;
            }
          })
      },
      systemSetting() {
        return new Promise((resolve, reject) => {
          var params = {
            roomId: this.room.roomId,
          }
          util.wxRequestPro('/UserServer/owner/info/systemSetting', params)
            .then((res) => {
              console.warn('systemSetting', res)
              var param = res.param
              this.formData = param;
            })
        })
      },
    }
  }
</script>

<style lang='stylus' scoped>
  .container {
    height: 100vh;
    background-color: #F3F6F9;
  }

  .info-card {
    position: relative;
    display: flex;
    width: 100vw;
    padding: 16px 30rpx 30rpx 30rpx;
    background-color: #fff;
    /* border 1px solid #f00 */
  }

  .avatar {
    width: 132rpx;
    height: 132rpx;
    border-radius: 50%;
    margin-right: 33rpx;
    /* border 1px solid #666 */
  }

  .loginBt {
    position: absolute;
    width: 140rpx;
    height: 50rpx;
    top: 50%;
    margin-top: -25rpx;
    left: 194rpx;
    text-align: center;
    color: #1086FF;
    border: 1px solid #1086FF;
    border-radius: 8rpx;
  }

  .basic,
  .username {
    font-size: 36rpx;
    line-height: 66rpx;
    font-weight: 600;
  }

  .userType {
    background: #0053FF;
    color: #fff;
    font-size: 26rpx;
    border-radius: 30rpx;
    padding: 6rpx 16rpx 6rpx 16rpx;
  }

  .userAddr {
    font-size: 26rpx;
    line-height: 36rpx;
    color: #838383;
    font-weight: 400;
  }

  .userChange {
    position: relative;
    margin: 34rpx 0rpx 0rpx auto;
    padding: 0rpx 30rpx 0rpx 0rpx;
    color: #838383;
    line-height: 34rpx;
    white-space: nowrap;

    /* border 1px solid #666 */
    .rightArrow {
      right: 0rpx;
      top: 8rpx;
      width: 22rpx;
      height: 22rpx;
    }
  }

  .myAppr {
    background: #fff;
    color: #333333;
    padding: 30rpx 0rpx 10rpx 30rpx;
    margin: 14rpx 0rpx 0rpx 0rpx;
    border-bottom: 0.3px solid #D8D8D8;
  }

  .navsItem {
    display: flex;
    padding: 32rpx 0rpx 32rpx 30rpx;
    margin: 12rpx 0rpx 0rpx 0rpx;
    background: #fff;

    .navsItemIcon {
      display: inline-block;
      vertical-align: middle;
      width: 36rpx;
      height: 36rpx;
      font-size: 32rpx;
      color: #030303;
      /* outline 1rpx solid #00f */
    }

    .navsItemTil {
      color: #333333;
      font-size: 30rpx;
      line-height: 36rpx;
      margin-left: 10rpx;
      /* outline 1rpx solid #0f0 */
    }

    .rightArrow {
      right: 40rpx;
      margin-top: 6rpx;
      height: 22rpx;
      width: 22rpx;
    }
  }

  .rightArrowTip {
    margin-left: auto;
    margin-right: 60rpx;
    color: #999999;
    line-height: 36rpx;
    /* outline 1rpx solid #0f0 */
  }

  .myNavsMenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #FFFFFF;
    padding: 0rpx 62rpx 0rpx 62rpx;
  }

  .navsAllItem {
    position: relative;
    /* width: 228rpx; */
    text-align: center;
    color: #333333;
    font-size: 26rpx;
    padding: 26rpx 0rpx 26rpx 0rpx;
    /* border: 1rpx solid red; */
  }

  .navsAllIcon {
    width: 48rpx;
    height: 48rpx;
    /* border: 1rpx solid pink; */
  }

  .navsAllText {
    color: #999999;
    font-size: 28rpx;
    margin-top: 8rpx;
  }

  .navsAllCount {
    position: absolute;
    top: 10rpx;
    right: 0rpx;
    height: 34rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    background: #FF6E5D;
    color: #FFFFFF;
    border-radius: 17rpx;
    padding: 0rpx 12rpx 0rpx 12rpx;
  }
</style>
